<template>
  <view class="edit-container">
    <u-form :model="formData" ref="form" :rules="rules" label-width="120">
      <!-- 原订单信息 -->
      <view class="section-card">
        <view class="section-title">原订单信息</view>
        
        <u-form-item label="订单号" required>
          <text class="readonly-text">{{formData.orderNo}}</text>
        </u-form-item>

        <!-- 门店选择 -->
        <u-form-item label="门店名称" prop="mchId" required>
          <u-input
            v-model="formData.mchName"
            placeholder="请选择门店"
            disabled
            @click="showStorePicker = true"
          ></u-input>
        </u-form-item>

        <!-- 房间选择 -->
        <u-form-item label="房间名称" prop="roomId" required>
          <u-input
            v-model="formData.roomName"
            placeholder="请选择房间"
            disabled
            @click="showRoomPicker = true"
          ></u-input>
        </u-form-item>

        <u-form-item label="预定开始时间" prop="beginTime" required>
          <u-datetime-picker
            v-model="formData.beginTime"
            mode="datetime"
            @change="calculateAmount"
          ></u-datetime-picker>
        </u-form-item>

        <u-form-item label="预定结束时间" prop="endTime" required>
          <u-datetime-picker
            v-model="formData.endTime"
            mode="datetime"
            @change="calculateAmount"
          ></u-datetime-picker>
        </u-form-item>

        <u-form-item label="支付状态">
          <text class="readonly-text">{{formData.statusDesc}}</text>
        </u-form-item>
      </view>

      <!-- 费用信息 -->
      <view class="section-card">
        <view class="section-title">费用信息</view>
        
        <view class="amount-section">
          <view class="amount-item">
            <text class="label">房费</text>
            <text class="value">¥ {{(formData.totalFee/100).toFixed(2)}}</text>
          </view>
          <view class="amount-item" v-if="formData.couponAmount">
            <text class="label">优惠券</text>
            <text class="value">-¥ {{(formData.couponAmount/100).toFixed(2)}}</text>
          </view>
          <view class="amount-item total">
            <text class="label">总计</text>
            <text class="value">¥ {{((formData.totalFee - formData.couponAmount)/100).toFixed(2)}}</text>
          </view>
        </view>
      </view>
    </u-form>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <u-button type="primary" @click="submitForm">保存</u-button>
    </view>

    <!-- 门店选择器 -->
    <u-picker
      :show="showStorePicker"
      :columns="[storeList]"
      @confirm="onStoreConfirm"
      @cancel="showStorePicker = false"
    ></u-picker>

    <!-- 房间选择器 -->
    <u-picker
      :show="showRoomPicker"
      :columns="[roomList]"
      @confirm="onRoomConfirm"
      @cancel="showRoomPicker = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: '', // 订单ID
        orderNo: '', // 订单号
        mchId: '', // 门店ID
        mchName: '', // 门店名称
        roomId: '', // 房间ID
        roomName: '', // 房间名称
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        statusDesc: '', // 支付状态
        totalFee: 0, // 总费用
        couponAmount: 0, // 优惠金额
      },
      
      showStorePicker: false,
      showRoomPicker: false,
      storeList: [],
      roomList: [],
      
      rules: {
        mchId: [{
          required: true,
          message: '请选择门店'
        }],
        roomId: [{
          required: true,
          message: '请选择房间'
        }],
        beginTime: [{
          required: true,
          message: '请选择开始时间'
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间'
        }]
      }
    }
  },
  
  onLoad(options) {
    if(options.type === 'edit') {
      // 从 storage 获取编辑数据
      const editData = uni.getStorageSync('orderInfo')
      if(editData) {
        this.formData = {
          ...this.formData,
          ...editData
        }
        // 获取该门店的房间列表
        this.getRoomList(this.formData.mchId)
      }
    } else {
      // 新增时初始化默认值
      this.formData.orderNo = '系统自动生成'
      this.formData.statusDesc = '未支付'
    }
    this.getStoreList()
  },
  
  methods: {
    // 获取订单详情
    getOrderDetail(id) {
      //发送GET请求获取订单详情_已完成
      uni.$u.http.get(`/system/order/${id}`).then(res => {
        if(res.code === 0) {
          this.formData = res.data
          // 获取该门店的房间列表
          this.getRoomList(this.formData.mchId)
        }
      })
    },
    
    // 发送POST请求获取门店列表信息_已完成
    getStoreList() {
      uni.$u.http.post('/system/merchant/list', {
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if(res.code === 0) {
          this.storeList = res.rows.map(item => ({
            label: item.mchName,
            value: item.id
          }))
        }
      })
    },
    
    // 发送POST请求获取房间列表信息_已完成
    getRoomList(mchId) {
      uni.$u.http.post('/system/room/list', {
        mchId: mchId,
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if(res.code === 0) {
          this.roomList = res.rows.map(item => ({
            label: item.roomName,
            value: item.id
          }))
        }
      })
    },
    
    // 门店选择
    onStoreConfirm(e) {
      const item = this.storeList[e.value[0]]
      this.formData.mchId = item.value
      this.formData.mchName = item.label
      this.showStorePicker = false
      // 清空已选房间
      this.formData.roomId = ''
      this.formData.roomName = ''
      // 获取新门店的房间列表
      this.getRoomList(item.value)
    },
    
    // 房间选择
    onRoomConfirm(e) {
      const item = this.roomList[e.value[0]]
      this.formData.roomId = item.value
      this.formData.roomName = item.label
      this.showRoomPicker = false
      this.calculateAmount()
    },
    
    // 计算费用
    calculateAmount() {
      if(this.formData.roomId && this.formData.beginTime && this.formData.endTime) {
        //发送POST请求计算费用_未完成
		uni.$u.http.post('/system/order/calculate', {
          roomId: this.formData.roomId,
          beginTime: this.formData.beginTime,
          endTime: this.formData.endTime
        }).then(res => {
          if(res.code === 0) {
            this.formData.totalFee = res.data.totalFee
          }
        })
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate().then(valid => {  
        if(valid) {
		  //发送POST请求提交表单_未测试
          uni.$u.http.post('/system/order/update', this.formData).then(res => {
            if(res.code === 0) {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          })
        }
      })
    },
    
  
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.section-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.readonly-text {
  color: #666;
  font-size: 28rpx;
}

.amount-section {
  padding: 20rpx;
  
  .amount-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .label {
      color: #666;
      font-size: 28rpx;
    }
    
    .value {
      color: #333;
      font-size: 28rpx;
    }
    
    &.total {
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #eee;
      
      .value {
        color: #f56c6c;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}

.bottom-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  gap: 30rpx;
  box-shadow: 0 -2rpx 6rpx rgba(0,0,0,0.05);
}

:deep(.u-form-item) {
  padding: 20rpx;
  margin-bottom: 10rpx;
}
</style>